<script setup>
import GameSimpleItem from "@/components/FrontComponents/GameSimpleItem.vue";
import {gameRecommendGetAPI} from "@/api/FrontApi/game.js";
import {ref, onMounted} from 'vue'

const newGameData = ref([])

const getNewGameData = async () =>  {
  const res = await gameRecommendGetAPI({length: 8, sort: 2})
  newGameData.value = res.data
}

onMounted(() => getNewGameData())
</script>

<template>
  <div class="discount-new-game-panel">
    <div class="container">
      <div class="desc">
        <span class="title">为您推荐</span>
      </div>
      <div class="recommend-game">
        <div class="item" v-for="item in newGameData" :key="item">
          <GameSimpleItem :game="item"></GameSimpleItem>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.discount-new-game-panel {
  margin: 40px 0;
  .container {
    .desc {
      display: flex;
      justify-content: space-between;
      .title {
        padding: 4px 6px;
        display: block;
        border-radius: 4px;
        background-color: $themeColor;
        box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      }
    }
    .recommend-game {
      margin: 10px 0;
      display: flex;
      flex-wrap: wrap;
      height: 400px;
      justify-content: space-between;
    }
  }
}
</style>
